<template>
	<view class="page" :style="{'min-height':h+'px','padding-top':mt+'px'}">
		<c-nav-bar title="申请记录"></c-nav-bar>
		<view class="records">
			<block v-if="list.length>0">
				<view v-for="(item,index) in list" :key="index" @click="nav(item)">
					<view class="r_title">
						<text>{{item.createDate}}提交</text>
						<text :class="statusColor[item.status]||'status_default'">{{statusDict[item.status]}}</text>
					</view>
					<view class="r_line"></view>
					<view class="r_items">
						<view>
							<view>商户名称</view>
							<view>{{item.merchantName}}</view>
						</view>
						<view>
							<view>企业名称</view>
							<view>{{item.companyName}}</view>
						</view>
						<view>
							<view>法人姓名</view>
							<view>{{item.legalPerson}}</view>
						</view>
						<!-- <view>
							<view>法人身份号</view>
							<view>{{item.idCard}}</view>
						</view> -->
						<view v-if="item.status==4">
							<view>拒绝原因</view>
							<view>{{item.checkFeedback}}</view>
						</view>
					</view>
				</view>
			</block>
			<block v-else>
				<NoData></NoData>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				h: uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				list: [],
				statusDict: {
					2: '审批中',
					1: '已通过',
					4: '已拒绝'
				},
				statusColor: {
					2: 'status_spz',
					1: 'status_ytg',
					4: 'status_yjj'
				}
			}
		},
		onLoad() {
			this.getRecords();
		},
		methods: {
			getRecords() {
				this.$api.get('/api/register/getSettledApplyList').then(res => {
					if (res.data.code === 0) {
						this.list = res.data.data;
						this.list.forEach(l=>{
							l.idCard = l.idCard.replace(/^(.{6})(?:\d+)(.{4})$/, '\$1******\$2');
						})
					} else this.$showModal(res.data.msg);
				})
			},
			nav(item) {
				uni.navigateTo({
					url: '/pagesMy/merchantOccupancyApplication/detiles?merchantId=' + item.merchantId +
						'&merchantType=' + item.merchantType
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.page {
		background: #F5F8FA;
		padding-bottom: 20rpx;

		.records {
			&>view {
				width: 100%;
				margin-top: 20rpx;
				background: #fff;
				padding: 36rpx 30rpx;
				box-sizing: border-box;

				.r_title {
					display: flex;
					align-items: center;
					justify-content: space-between;

					text {
						font-size: 36rpx;
						font-family: PingFang-SC, PingFang-SC;
						font-weight: bold;
						color: #1C1E41;

						&:last-child {
							font-size: 32rpx;
						}
					}
				}

				.r_line {
					width: 100%;
					height: 1rpx;
					background: #EFEFEF;
					margin: 24rpx 0;
				}

				.r_items {
					width: 100%;

					&>view {
						display: flex;
						align-items: center;
						margin-top: 28rpx;

						&:first-child {
							margin-top: 0;
						}

						&>view {
							&:first-child {
								font-size: 30rpx;
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								color: #666666;
								width: 170rpx;
							}

							&:last-child {
								width: calc(100% - 170rpx);
								font-size: 30rpx;
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								color: #1C1E41;
								line-height: 30rpx;
							}
						}
					}
				}
			}
		}

		.status_spz {
			color: #FF7D01 !important;
		}

		.status_ytg {
			color: #188FFE !important;
		}

		.status_yjj {
			color: #FF4141 !important;
		}

		.status_default {
			color: #111111 !important;
		}
	}
</style>